<template>
  <div>
    <el-button
      size="small"
      type="success"
      @click="insertVisibility = true"
      icon="el-icon-document-add"
      >新增</el-button
    >
    <el-drawer
      direction="ttb"
      :with-header="false"
      size="84%"
      :visible.sync="insertVisibility"
    >
      <el-form ref="testBill" class="testBill" :model="testBill" :rules="rules">
        <el-divider>BILL-SUMMARY</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="billMadeTime" label="订单时间：">
              <el-date-picker v-model.trim="testBill.billMadeTime">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制单人：">
              <el-tag>{{
                $store.state.userInfo.username || "匿名用户"
              }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider>MATERIAL-DETAIL</el-divider>

        <decorate-line>
          <el-button type="primary" size="mini" @click="delDetail"
            >删除</el-button
          >
          <el-button type="primary" size="mini" @click="addDetail"
            >添加</el-button
          >
        </decorate-line>
        <el-table
          ref="coreTable"
          :data="testBill.testDetails"
          max-height="360px"
          border
          show-summary
          :summary-method="summaryMethod"
          @selection-change="selectionChange"
        >
          <el-table-column
            type="index"
            align="center"
            label="--"
          ></el-table-column>
          <el-table-column type="selection" align="center"></el-table-column>

          <el-table-column align="left" width="256" label="品名">
            <template #default="{ row }">
              <el-link type="success" icon="el-icon-s-goods">{{
                row.materialName
              }}</el-link>
            </template>
          </el-table-column>

          <el-table-column sortable width="96" prop="quantity">
            <template #header>
              <span>数量</span>
            </template>
            <template #default="that">
              <el-form-item :prop="'testDetails.' + that.$index + '.quantity'">
                <el-input
                  type="number"
                  size="mini"
                  v-model="that.row.quantity"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="domainField" >
            业务占位示例1
          </el-table-column>
          <el-table-column align="center" label="domainField">
            11
          </el-table-column>
        </el-table>
        <el-divider>OPERATOR-SIGN</el-divider>
        <el-descriptions border>
          <el-descriptions-item label="验收人"></el-descriptions-item>
          <el-descriptions-item label="审核人"></el-descriptions-item>
        </el-descriptions>


        <decorate-line>
          <el-button type="warning" icon="el-icon-remove" @click="reset"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-edit" @click="testBillSubmit"
            >提交
          </el-button>
        </decorate-line>

      </el-form>

      <material-support
        ref="support"
        @postSelected="postSelected"
      ></material-support>
    </el-drawer>
  </div>
</template>

<script>
/**
 * 页面核心数据结构体说明文档
 * testBill: {
        billCode: "string",
        billMadeTime: "2022-01-27T13:32:04.994Z",
        addDetails:[],
        testDetails: [
          {
            materialName: "current",
            quantity: 1,
            testDetailId: 0,
          },
          {
            materialName: "someone",
            quantity: 10,
            testDetailId: 0,
          },
        ],
        version: 0,
      },
 *  el-table-column prop 属性，当没有format函数和默认插槽的时候 作为数据展示出来 ，起到展示数据作用
 *  当有二者之一时候，依然可以绑定prop属性，此时它可以用于sort和reduce
 *  :sort-by="['quantity']"
 *      if (index ===3){column.property="quantity"}
* */
// import New from './components/New.vue';
import MaterialSupport from "@/components/infru/MaterialSupport";
import DecorateLine from "@/components/common/DecorateLine";
import { testBill } from "@/apis";
export default {
  name: "TestBillInsert",
  components: {
    DecorateLine,
    MaterialSupport,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      insertVisibility: false,

      selectedMaterials: [],
      testBill: {
        billCode: "string",
        billMadeTime: new Date().toJSON(),
        testDetails: [
          // {
          //   materialName: "example",
          //   quantity: 100,
          //   testDetailId: -10000,
          // },
          // {
          //   materialName: "someone",
          //   quantity: 10,
          //   testDetailId: -7878,
          // },
        ],
        version: 0,
      },
      currentDetail: {
        materialName: "current",
        quantity: 0,
        testDetailId: -4585,
      },
      selectedDetails: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},

    addDetail() {
      this.$refs.support.appear();
    },
    //乐观删除函数
    delDetail() {
      let t = this.testBill.testDetails.filter((x) => {
        let p = this.selectedDetails.find((y) => {
          return y.testDetailId === x.testDetailId;
        });
        this.$notify.warning("Debug sss :" + JSON.stringify(!p));
        return !p;
      });
      this.$message.success("Debug details :" + JSON.stringify(t));
      this.testBill.testDetails = t;
    },
    selectionChange(selected) {
      this.selectedDetails = selected;
      // this.$message.warning("Debug selected :" + JSON.stringify(selected));
    },
    postSelected(selected) {
      // this.$message.warning("格式化数据并添加" + JSON.stringify(selected));

      let t = selected.map((x) => {
        return {
          materialName: x.materialName,
          quantity: 0,
          testDetailId: Math.floor(Math.random() * -1000),
        };
      });
      this.$notify.warning("Debug t :" + JSON.stringify(t.length));

      // this.$notify.warning(JSON.stringify(t));
      this.testBill.testDetails.push(...t);
    },
    testBillSubmit() {
      /*    this.$http({
              method: "post",
              url: "/",
              data: this.testBill,
            })*/
      testBill.insertTestBill(this.testBill).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.insertVisibility = false;
        },
        (error) => {
          console.log(".testBill request error : " + error.response.status);
        }
      );
    },
    reset() {
      this.$refs.testBill.resetFields();
      this.testBill.testDetails = [];
      this.$nextTick((x) => {
        this.$refs.coreTable.doLayout();
      });
    },
    summaryMethod({ columns, data }) {
      //column对象是 el-table-column代表的元信息列 如prop属性property 如align left 等
      //columns 为 List<column>
      //detailsData 为 form内嵌table 中table绑定的data 其中元素依然建议用row的概念表示 理解好 row[column.property]
      const sums = [];
      columns.forEach((column, index) => {
        //index 从0开始到n 以此循环


        const values = data.map((row) => Number(row[column.property]));
        //values 可能为undefined 表示该列没有绑定prop
        //下面是通用一般求和算法
            //诸多列中只要有一个cell是数字就求和
        if (!values.every((value) => isNaN(value))) {
          //
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              //如果不是不是数字 即是数字
              return prev + curr;
            } else {
              //如果不是数字 就略过
              return prev;
            }
          }, 0);
          sums[index] += "个";
        } else {
          sums[index] = "N/A";
        }


        //
        if (index === 0) {
          sums[index] = 0;
          return;
        }
        if (index === 1) {
          sums[index] = "小计";
        }

      });




      // sums[1] = "N/A";
      // sums[2] = 300;
      return sums;
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-table {
  margin: 0 20px;
  max-width: 96%;
}
.el-form {
  width: 64%;
  padding-left: 300px;
}
.footer {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
}
//.table-operation{
//  display: flex;
//  justify-content: space-between;
//}
.el-form-item {
  margin-bottom: 0;
}
//gundong tiao
::v-deep .el-table {
  .el-table__body-wrapper {
    z-index: 2;
  }
}
::v-deep .el-table {
  .el-table__cell {
    padding: 2px 0;
  }
}
</style>
